import React, { Component } from 'react'
import MusicList from '../components/MusicList.jsx'
import qs from 'qs'

export default class Hot extends Component {
    state = {
        panel_img: '../static/img/hot_music_bg_2x.jpg',
        music_list: []
    }
    getHotMusic(url){
        this.$http.get(url).then(res=>{
            const data = res.data.playlist.tracks
            const coverImgUrl = res.data.playlist.coverImgUrl
            this.setState({music_list:data,panel_img: coverImgUrl})
        })
    }
    componentWillMount(){
        //接收id
        const get_str = this.props.location.search.slice(1)
        const get_obj = qs.parse(get_str)
        const id = get_obj.id
        //调用hot数据
        var url = "/top/list?idx=1"
        if(id){
            url = "/playlist/detail?id="+id
        }
        this.getHotMusic(url)
    }
    render() {
        return (
            <div id="hot_app">
                <div style={{
                    backgroundImage: 'url('+this.state.panel_img+')',
                    width: '100%',
                    height: 200,
                    backgroundSize: '100%',
                    backgroundPosition: 'center'
                    }}>
                </div>
                <MusicList pn={this.state.music_list}/>
            </div>
        )
    }
}
